﻿<!DOCTYPE html>
<html lang="en">
<head>
   <!--#include file="ssi/head.html"-->
  <title>json格式化及高亮</title>
  <meta name="description" content="json,格式化,高亮">
  <meta name="keywords" content="json,格式化,高亮">
  <!--#include file="ssi/link.html"-->
  <script src="js/pages/json1/c.js" type="text/javascript"></script>
  <link href="js/pages/json1/s.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->

    <section class="container margin-bot-l">
      <div class="HeadersRow">
        <textarea id="RawJson" placeholder="请将您的json字符串贴在输入框内，然后点击下方按钮，进行格式化操作"></textarea>
      </div>
      <div id="ControlsRow">
        <input type="Button" value="格式化" onclick="Process()" class="btn btn-primary" />
        <span id="TabSizeHolder">
          缩进量
          <select id="TabSize" onchange="TabSizeChanged()">
            <option value="1">1</option>
            <option value="2" selected="true">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
        </span>
        <label for="QuoteKeys">
          <input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true" /> 
          引号
        </label>&nbsp; 
        <a href="javascript:void(0);" onclick="SelectAllClicked()">全选</a>
        &nbsp;
        <span id="CollapsibleViewHolder" >
            <label for="CollapsibleView">
              <input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true" /> 
              显示控制
            </label>
        </span>
        <span id="CollapsibleViewDetail">
          <a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a>
          <a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a>
          <a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a>
        </span>
      </div>
      <div id="Canvas" class="Canvas"></div>
    </section>

    <section class="container">
      <style>
        .alert a{margin-right: 10px;}
      </style>
      <div class="alert alert-warning">
        <strong>其他可用的JSON格式化工具：</strong>
        <a href="http://www.bejson.com/" target="_blank">BeJson在线格式化校验</a>
        <a href="http://www.wubin.work/json2" target="_blank">JSON在线校验和格式化</a>
        <a href="https://c.runoob.com/front-end/53" target="_blank">JSON在线解析</a>
      </div>
    </section>

<!--#include file="ssi/footer.html"-->

<script>
  // 每一页都需要配置的信息
  var pageInfo = {
    toolLogo: 'img/icon-json1.png',
    toolName: document.title
  }
</script>
  <!--#include file="ssi/script.html"-->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript" src="js/pages/json1/m.js"></script>
</body>
</html>

